<!--
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2022-12-20 14:35:28
 * @LastEditors: 李小晴 2689279066@qq.com
 * @LastEditTime: 2023-02-15 10:07:40
 * @FilePath: \grazlink20\uc_sys\src\views\Asset\Pasture\components\Edit.vue
 * Copyright (c) 2023 by 李天惊 uf_lee@163.com, All Rights Reserved. 
-->
<script setup lang="ts">
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { PropType, reactive, watch } from 'vue'
// import { TableData } from '@/api/role/types'
import { required } from '@/utils/formRules'
// import { ElTable, ElButton, ElTableColumn, ElInput } from 'element-plus'

// const now = new Date()

const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<TableData>>,
    default: () => null
  },
  formSchema: {
    type: Array as PropType<FormSchema[]>,
    default: () => []
  }
})

const { register, methods, elFormRef } = useForm({
  schema: props.formSchema
})
const rules = reactive({
  name: [required],
  unit: [required]
})

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    const { setValues } = methods
    setValues(currentRow)
  },
  {
    deep: true,
    immediate: true
  }
)

defineExpose({
  elFormRef,
  getFormData: methods.getFormData
  // tableDatas
})
</script>

<template>
  <div>
    <Form :rules="rules" @register="register" />
    <!-- <ElTable :data="tableDatas" style="width: 100%">
      <ElTableColumn prop="name" label="设备名称" width="120">
        <template #default="scope">
          <div @dblclick="cellDbclickName(scope)" v-if="scope.row.showName">
            {{ scope.row.feed ? scope.row.feed : '设备名' }}
          </div>
          <ElInput
            :rules="rules"
            v-if="!scope.row.showName"
            placeholder="设备名"
            v-model="scope.row.feed"
            @blur="onBlurName(scope)"
          />
        </template>
      </ElTableColumn>
      <ElTableColumn label="配比%">
        <template #default="scope">
          <p @dblclick="cellDbclickZip(scope)" v-if="scope.row.showZip">
            {{ scope.row.percentage ? scope.row.percentage : '百分比' }}
          </p>
          <ElInput
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="百分比"
            v-if="!scope.row.showZip"
            v-model="scope.row.percentage"
            @blur="onBlurZip(scope)"
          />
        </template>
      </ElTableColumn>
      <ElTableColumn fixed="right" label="Operations" width="200">
        <template #default="scope">
          <ElButton link type="danger" @click.prevent="deleteRow(scope.$index)">删除</ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
    <ElButton class="mt-4" style="width: 100%" @click="onAddItem">添加设备</ElButton> -->
  </div>
</template>
